<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button class="tableFontSize" type="primary" link size="small" @click="lookBtn(row.row.row)">控制</el-button>
        
        </span>
      </template>
  
      <template v-slot:listSS="{ row, field }">
        <div v-if="field == 'currentIntensityMap'">
          <el-popover placement="right" :width="400" trigger="click">
            <template #reference>
              <el-button type="text">查看</el-button>
            </template>
            <el-table :data="Object.keys(row.currentIntensityMap).map(key=>{
                      return {label:key,value:row.currentIntensityMap[key]}
                    })">
              <el-table-column property="label" label="名称" />
              <el-table-column property="value" label="数值" />
            </el-table>
          </el-popover>
        </div>
        <div v-if="field == 'currentVoltageMap'">
          <el-popover placement="right" :width="400" trigger="click">
            <template #reference>
              <el-button type="text">查看</el-button>
            </template>
            <el-table :data="Object.keys(row.currentVoltageMap).map(key=>{
                      return {label:key,value:row.currentVoltageMap[key]}
                    })">
              <el-table-column property="label" label="名称" />
              <el-table-column property="value" label="数值" />
            </el-table>
          </el-popover>
        </div>
      </template>
      <template v-slot:selectNamelist>
        充放电控制
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" 
      :width="300" :height="auto" v-model="state.addModal"
        resize :mask="true" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">控制</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="操作" prop="stationTypeName">
                    <div style="display:flex;justify-content: space-between;" class="w100">
                      <el-button type="primary" @click="shuxinClick">刷新</el-button>
                      <el-button type="primary" @click="btncontrolClick(1)">充电</el-button>
                      <el-button type="primary" @click="btncontrolClick(2)">放电</el-button>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="控制方式" prop="controlPort">
                    <el-select class="w100"
                    disabled filterable v-model="state.formData.controlPort" placeholder="请选择"
                      @change="stationModelChange">
                       <el-option v-for="item in [{
                          value:1,
                          label:'一号开出口'
                        },{
                          value:2,
                          label:'二号开出口'
                        },{
                          value:3,
                          label:'三号开出口'
                        },{
                          value:4,
                          label:'四号开出口'
                        },{
                          value:5,
                          label:'五号开出口'
                        },{
                          value:6,
                          label:'六号开出口'
                        },{
                          value:7,
                          label:'直接控制'
                        }]" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option> 
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer v-if="false">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">
            保存
          </el-button>
        </template>
      </vxe-modal>
    </teleport>

    <el-dialog v-model="state.dialogVisiblepictureCardPreview">
      <img :src="state.dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
  import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
  import {
    table_headers
  } from '@/components/commonCom/table_headers';
  import axios from "@/utils/request"
  import usePagesStore from '@/store/modules/pages'
  import {
    getsubstationmodel,
    fileupload
  } from '@/api/config'
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore()
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP
  components: {
    list_controller
  }
  const upload = ref(null)
  let state = reactive({
    fileList: [],
    dialogVisiblepictureCardPreview: false,
    dialogImageUrl: '',
    options: {
      tableheads: computed(() => table_headers.chargeManage),
      listSS: [{
          field: "currentIntensityMap"
        },
        {
          field: "currentVoltageMap"
        }
      ],
      queryList: {
        dropdownUrl: '',
        querys: [{
          field: 'powerName',
          title: '电源名称',
          type: 'input',
          binddata: ''
        }, {
          field: 'powerTypeName',
          title: '电源类型',
          type: 'select',
          binddata: ''
        }],
        queryMap: new Map([
          ['sensorTypeId', 'safety_pointType'],
          ['deviceTypeId', 'safety_deviceType'],
          ['alarmTypeId', 'alarmType']
        ])
      },
      dataUrl: '/realPowerPoint/chargeManage',
      delUrl: '/substation/type/deleteStation',
      addUrl: '/substation/type/addStation',
      descUrl: '/substation/type/searchStation/',
      editUrl: '/substation/type/editStation',
    },
    // 表单
    addModal: false,
    modalTitle: '新增分站类型',
    drawerShow: false,
    formRef: null,
    formData: {},
    rules: {
      stationTypeName: [{
        required: true,
        message: '请输入类型名称',
        trigger: 'blur'
      }],
      stationModelId: [{
        required: true,
        message: '请输入通风类型',
        trigger: 'change'
      }],
      stationInNum: [{
        required: true,
        message: '请选择传感器编号',
        trigger: 'change'
      }],
      stationOutNum: [{
        required: true,
        message: '请输入报警浓度',
        trigger: 'change'
      }]
    },
    editId: undefined,
    stationmodelList: [],
    stationInNumList: [],
    stationOutNumList: [],
    options1: {
      tableheads: computed(() => table_headers.quoteStation),
      queryList: {
        autoSearch: true,
        dropdownUrl: '',
        stationCode: '',
        stationTypeId: '',
        querys: [{
          field: 'powerName',
          title: '电源名称',
          type: 'input',
          binddata: ''
        }, {
          field: 'powerTypeName',
          title: '电源类型',
          type: 'select',
          binddata: ''
        }],
        queryMap: new Map([
          ['sensorTypeId', 'safety_pointType'],
          ['deviceTypeId', 'safety_deviceType'],
          ['alarmTypeId', 'alarmType']
        ])
      },
      dataUrl: '/substation/type/quote'
    },
  })
  // 控制按钮
  function lookBtn(row) {
    state.addModal = true
    state.formData=row
    // axios.post(state.options.descUrl + row.id).then(res => {
    //   if (res.code == 200) {
    //     state.formData = res.data
    //     state.options1.queryList.stationTypeId = res.data.id
    //   }
    // })

  }
  function shuxinClick(){
    proxy.$refs['zujianname'].getData()
  }
  function btncontrolClick(type){
    if(type==1){
      axios.get('/power/charge?powerName='+state.formData.powerName).then(res=>{
        proxy.$modal.msgSuccess(res.msg);
        state.addModal=false
      })
    }else{
      axios.get('/power/discharge?powerName='+state.formData.powerName).then(res=>{
        proxy.$modal.msgSuccess(res.msg);
        state.addModal=false
      })
    }
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (state.editId) {
          state.formData.id = state.editId
          axios.post(state.options.editUrl, state.formData).then(res => {
            if (res.code == 200) {
              proxy.$refs['zujianname'].getData()
              state.addModal = false
              proxy.$modal.msgSuccess(res.msg);
            }
          })
        } else {
          axios.post(state.options.addUrl, state.formData).then(res => {
            if (res.code == 200) {
              proxy.$refs['zujianname'].getData()
              state.addModal = false
              proxy.$modal.msgSuccess(res.msg);
            }
          })
        }
      }
    })
  }

  function cancel() {
    state.addModal = false
  }

  function getsubstationmodelList() {
    let arr = []
    getsubstationmodel().then(res => {
      state.stationmodelList = res.data
      state.stationmodelList.forEach(item => {
        arr.push({
          value: item.id,
          label: item.stationModelName
        })
      })
    })
    axios.get('/realPowerPoint/powerTypeList').then(res=>{
        state.options.queryList.querys[1].options = arr=res.data.map(item=>{
          return {
            label:item,
            value:item
          }
        })
    })
  }

  function stationModelChange(val) {
    state.stationmodelList.forEach(item => {
      if (item.id == val) {
        state.stationInNumList = item.stationInNumList
        state.formData.stationInNum = item.stationInNumList[0]
        state.stationOutNumList = item.stationOutNumList
        state.formData.stationOutNum = item.stationOutNumList[0]
      }

    })
  }
  getsubstationmodelList()
</script>
<style lang="scss" scoped>
  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>